<template>
  <n-card :bordered="false" class="proCard">
    <QueryForm v-model="queryForm" @submit="reloadTable">
      <!--        <template #more="{ queryForm }">-->
      <!--          <n-form-item label="姓名">-->
      <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--          </n-form-item>-->
      <!--          <n-form-item label="姓名">-->
      <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--          </n-form-item>-->
      <!--          <n-form-item label="姓名">-->
      <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--          </n-form-item>-->
      <!--          <n-form-item label="姓名">-->
      <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
      <!--          </n-form-item>-->
      <!--        </template>-->
      <template #default="{ queryForm }">
        <n-form-item label="接口编码">
          <n-input v-model:value="queryForm['resourceCode-like']" placeholder="请输入接口编码" />
        </n-form-item>
        <n-form-item label="接口地址">
          <n-input v-model:value="queryForm['resourceUrl-like']" placeholder="请输入接口地址" />
        </n-form-item>
        <n-form-item label="接口状态">
          <n-select style="width: 200px" v-model:value="queryForm['enabled']"
                    :options="enabledOptions" />
        </n-form-item>
        <n-form-item label="接口名称">
          <n-input v-model:value="queryForm['resourceName-like']" placeholder="请输入接口名称" />
        </n-form-item>
      </template>

    </QueryForm>
    <n-space>
      <n-button type="primary" @click="doSaveModal()">
        新建
      </n-button>
      <n-button type="warning" @click="doUpdateModal()">
        编辑
      </n-button>
      <n-button type="error" @click="doDeleteModal()">
        删除
      </n-button>
      <n-button @click="doImportFromSwaggerModal()">
        接口文档导入
      </n-button>
    </n-space>
    <BasicTable
      :columns="tableColumns"
      v-model:checked-row-keys="checkedRows"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      :scroll-x="1090"
    >
      <template #tableTitle>
      </template>
      <template #toolbar>
      </template>
    </BasicTable>

  </n-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { BasicTable } from "@/components/Table";
import httpApi from "../httpApi";
import { QueryForm } from "@/components/QueryForm/index";
import {
  doDeleteModal,
  doImportFromSwaggerModal,
  doSaveModal,
  doUpdateModal,
  enabledOptions,
  onCheckedRowEvent,
  queryForm,
  tableColumns,
  tableRef
} from "./Service";
import SlashAppContext from "@/context/SlashAppContext";
import { checkedRows } from "@/views/SysApp/Service";

export default defineComponent(
  {
    name: "SysResourceApiList",
    components: { BasicTable, QueryForm },
    setup() {
      const loadDataTable = async (res) => {
        console.log("表单参数:{}", queryForm.value);
        checkedRows.value = [];
        console.log("更新参数");
        return await httpApi.selectSysTbResourcePageList({
          resourceType: "api",
          resourceAppCode: SlashAppContext.getRequest().appCode,
          searchKey: null,
          ...res,
          ...queryForm.value
        });
      };

      function reloadTable() {
        tableRef.value.reload();
      }

      return {
        loadDataTable,
        checkedRows,
        reloadTable,
        tableColumns,
        onCheckedRowEvent,
        queryForm,
        tableRef,
        doSaveModal,
        doUpdateModal,
        doDeleteModal,
        enabledOptions,
        doImportFromSwaggerModal
      };
    }
  }
);


</script>

<style lang="less" scoped></style>
